<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GRid</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/main-style.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/touchicon.png" />
<style type="text/css">
</style>
</head>
<body>

	<p class="u-content-title-p">
		GRID演示 <span style="color: red; padding-left: 20px; font-size: 12px">保存成功!</span>
	</p>
	<hr class="u-hr-title">
	<br>
	<br> name:
	<input type="text">
	<input type="button" value="search" id="searchBtn">
	<br>
	<br>


	<input type="button" value="add" id="addBtn">
	<input type="button" value="delete" id="deleteBtn">
	<input type="button" value="modify" id="modifyBtn">

	<div id="gridTest4" style="height: 100%"></div>
</body>
<script type="text/javascript" src="sea-modules/sea.js" id="seajsnode"></script>
<script type="text/javascript" src="sea-modules/boot_i.js"></script>
<script type="text/javascript">

	seajs.use([ 'jquery', 'combox', 'grid', 'dialog' ], function($, combox, grid, Dialog) {
		
		var opt = {
			//width:'1024',
			header : [ {
				title : "a",
				width : 80
			}, {
				title : "b",
				width : 80
			}, {
				title : "c",
				width : 80
			}, {
				title : "d",
				width : 120
			}, {
				title : "e",
				width : 120
			}, {
				title : "f",
				width : 120
			}, {
				title : "g",
				width : 120
			}, {
				title : "h",
				width : 120
			}, {
				title : "i",
				width : 120
			}, {
				title : "j",
				width : 20
			} ],
			data : [ [ "0a", "", "", "", "", "", "", "", "", "" ], [ "1a", "", "", "", "", "", "", "", "", "" ], [ "2a", "", "", "", "", "", "", "", "", "" ],
					[ "3a", "", "", "", "", "", "", "", "", "" ], [ "4a", "", "", "", "", "", "", "", "", "" ], [ "5a", "", "", "", "", "", "", "", "", "" ],
					[ "6a", "", "", "", "", "", "", "", "", "" ], [ "7a", "", "", "", "", "", "", "", "", "" ], [ "8a", "", "", "", "", "", "", "", "", "" ],
					[ "9a", "", "", "", "", "", "", "", "", "" ], [ "0b", "", "", "", "", "", "", "", "", "" ], [ "1b", "", "", "", "", "", "", "", "", "" ],
					[ "2b", "", "", "", "", "", "", "", "", "" ], [ "3b", "", "", "", "", "", "", "", "", "" ], [ "4b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "中文", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "5b", "", "", "", "", "", "", "", "", "" ], [ "6b", "", "", "", "", "", "", "", "", "" ], [ "7b", "", "", "", "", "", "", "", "", "" ],
					[ "8b", "", "", "", "", "", "", "", "", "" ], [ "9b", "", "", "", "", "", "", "", "", "" ], [ "19b", "", "", "", "", "", "", "", "", "" ] ]
		}

		var g = grid($('#gridTest4'), opt);

		$('#searchBtn').bind('click', function() {
			g.loadData();
		});

		new Dialog({
			trigger : '#addBtn',
			content : './add.html',
			//content : 'http://baidu.com',
			width : '800px',
			height : '800px',
			hasMask : {
				hideOnClick : false
			}
		});
		
		window.saveMessage = function(msg) {
			alert(msg + "!!!");
		}
		window.refresh = function() {
			g.loadData();
		}
	});
</script>
</html>